<template>
  <view>
    <view class="custom-nav-bar">
      <image src="/static/message/rectangle77.png" class="nav-bar-bg1" mode="aspectFill"></image>
        <image src="/static/message/Arrow_left_arrow-left (1).png" mode="" class="nav-bar-bg2" @click="navBack"></image>
        <image :src="avatar" mode="" class="user-pic"></image>
      <text class="nav-title">{{ username }}</text>
      <image src="../../static/more.png" mode="" class="nav-bar-bg3" @click="toReport()"></image>
    </view>
    
    <view class="cat-article">
      <text class="cat-article-t1">{{ articleObj.title }}</text>
      <text class="cat-article-t2">{{articleObj.createTime}}</text>
      <text class="cat-article-t3">{{articleObj.content}}</text>
      <image :src="articleObj.imgs[0]" mode=""></image><!-- <view class="cat-article-img">
        
      </view> -->
    </view>
    
    <view class="cat-comment">
      <view class="cat-comment-top">
        <text>全部评论  共{{commentObj.commentNum}}条</text>
      </view>
      <view class="cat-comment-main">
        <view class="cat-comment-one" v-for="(item,i) in commentObj.firstComments" :key="i">
          <view class="cat-comment-one-top">
            <view class="cat-comment-one-user">
              <image :src="item.user.avatar" mode=""></image>
              <view class="cat-comment-one-user-right">
                <text class="cat-comment-one-t1">{{item.user.username}}</text>
                <text class="cat-comment-one-t2">{{item.createTime}}</text>
              </view>
            </view>
            <view class="cat-comment-one-praise" @click="firstlike(item.firstCid)">
              <image src="../../static/article/praise_thumbs-up.png" mode=""></image>
              <text>{{item.likeNum}}</text>
            </view>
          </view>
          <view class="cat-comment-one-main">
            <view class="cat-firstCid" @click="getFirstCid(item.firstCid,item.user.username)" @longpress="dFComment(item.firstCid)">
              <text>{{item.content}}</text>
              <image :src="item.img" mode="" v-show="item.img"></image>
            </view>
            <view class="cat-comment-two" v-for="(item2,i2) in item.secondComments" :key="i2">
              <view class="cat-comment-two-top">
                <view class="cat-comment-two-user">
                  <image :src="item2.user.avatar" mode=""></image>
                  <view class="cat-comment-two-user-right">
                    <text class="cat-comment-two-t1">{{item2.user.username}}</text>
                    <text class="cat-comment-two-t2">{{item2.createTime}}</text>
                  </view>
                </view>
                <view class="cat-comment-two-reply">
                  <text class="cat-comment-two-t3">回复</text>
                  <text class="cat-comment-two-t4">{{item2.replyUsername}}</text>
                </view>
                <view class="cat-comment-one-praise" @click="secondlike(item2.secondCid)">
                  <image src="../../static/article/praise_thumbs-up.png" mode=""></image>
                  <text>{{item2.likeNum}}</text>
                </view>
              </view>
              
              <view class="cat-comment-two-main" @click="getsecondCid(item2.secondCid,item2.user.username,item2.firstCid)" @longpress="dSComment(item2.secondCid)">
                <text v-show="item2.content">{{item2.content}}</text>
                <image :src="item2.img" mode="" v-show="item2.img"></image>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    
    <view class="user-input">
      <uni-easyinput :focus="isFocus" class="custom-input" v-model="value" trim="all" :placeholder="myComment" @input="input()" ></uni-easyinput>
      <view class="user-send" @click="postComment()">
        <text class="user-t5">发送</text>
      </view>
      <view class="user-pic" @click="getPic()">
        <image src="../../static/article/pic.png" mode=""></image>
      </view>
      <view class="user-praise" @click="likeArticle()">
        <image src="../../static/article/praise_thumbs-up.png" mode=""></image>
        <text>{{articleObj.likeNum}}</text>
      </view>
    </view>
    
    

    <uni-popup ref="popup" :mask-click="false">
    	<button @click="gotoReport()">举报</button>
    	<button @click="closeReport()">取消</button>
    </uni-popup>
  </view>
</template>

<script>
  import {getArticleDetail,getComments,likeFirstComment,likeSecondComment,likeArticle,deleteFirstComment,deleteSecondComment,reportArticle} from '../../api/article.js'
  export default {
    data() {
      return {
        id: 0,
        username: '',
        avatar: '',
        articleObj: {},
        commentObj: {},
        queryObj:{
          aid: 0,
          curPage: 1,
          pageSize: 6
        },
        timer: null,
        kw: '',
        pic: '',
        firstCid: '',
        secondCid: '',
        isFocus: false,
        myComment: '一起来发表评论吧',
        reply: false,
        value: '',
        dCid: '',
        isFirst: false
      };
    },
    onLoad(option) {
      // console.log(option);
      this.id = option.id
      this.queryObj.aid = option.id
      this.username = option.username
      this.avatar = option.avatar
      this.getArticle()
      this.getComments()
    },
    methods:{
      async getArticle(){
         const {data:data} = await getArticleDetail(this.id)
         
         this.articleObj = data.data
         
       },
       async getComments(){
         const {data:data} = await getComments(this.queryObj)
         // console.log(data);
         this.commentObj = data.data
         // console.log(this.commentObj);
       },
       navBack(){
         uni.navigateBack({
         	delta: 1
         });
       },
       async firstlike(firstCid){
         // console.log(firstCid);
         const {data:data} = await likeFirstComment(firstCid)
         // console.log(data);
         if(data.code === 200 )
         uni.$showMsg('点赞成功')
         this.getComments()
         
       },
       async secondlike(secondCid){
         // console.log(secondCid);
         const {data:data} = await likeSecondComment(secondCid)
         // console.log(data);
         if(data.code === 200 )
         uni.$showMsg('点赞成功')
         this.getComments()
       },
       async likeArticle(){
         const {data:data} = await likeArticle(this.queryObj.aid)
         // console.log(data);
         this.getArticle()
       },
       input(e){
         clearTimeout(this.timer)
         this.timer = setTimeout(()=>{
           this.kw = e
           // console.log(this.kw);
         },500)
       },
      async getPic(){
        const res = await uni.chooseImage({
         	count: 1, 
         });
         console.log(res[1].tempFilePaths[0]);
         this.pic = res[1].tempFilePaths[0]
         // console.log(this.pic);
       },
       async postComment(){
         
         if(!this.reply){
           const formData = {
              aid: this.id,
              content: this.kw
            }
            const token = uni.getStorageSync('token')
            console.log(token);
            console.log(formData);
            console.log(this.pic);
            const data = await uni.uploadFile({
                 url: 'http://www.newbabyya.com/article/publishFirstComment',  
                 filePath: this.pic, 
                 name: 'img', 
                 method: 'post',
                 formData: formData,
                 header:{
                        'Authorization': token
                       },
             });  
             this.value = '';
             console.log(data);
             this.getComments()
             return
         }else{
                const FormData = {
                   firstCid: this.firstCid,
                   replyCid: this.secondCid,
                   content: this.kw
                 }
                 const token = uni.getStorageSync('token')
                 console.log(token);
                 const res = await uni.uploadFile({
                      url: 'http://www.newbabyya.com/article/publishSecondComment', // 你的后端上传接口  
                      filePath: this.pic, // 文件路径  
                      name: 'file', // 后端接收的文件字段名，应与后端代码中的字段名一致  
                      method: 'post',
                      formData: FormData,
                      header:{
                             'Authorization': token
                            } 
                  });  
                  this.value = '';
                  this.myComment = '一起来发表评论吧';
                  console.log(res);
                  this.getComments();
                  this.reply = false
                return
         }

       },
       getFirstCid(fCid,username){
         this.secondCid = ''
         this.firstCid = fCid
         // console.log(this.firstCid);
         this.isFocus = !this.isFocus
         this.myComment = '@' + username
         this.reply = true
       },
       getsecondCid(sCid,username,firstCid){
         this.firstCid = firstCid
         this.secondCid = sCid
         // console.log(this.secondCid);
         this.isFocus = !this.isFocus
         this.myComment = '@' + username
         this.reply = true
       },
      async dFComment(firstCid){
        this.dCid = firstCid
        this.isFirst = true
        const {data:data} = await deleteFirstComment(this.dCid)
        // console.log(data);
        this.getComments();
        uni.$showMsg(data.msg)
       },
      async dSComment(secondCid){
         this.dCid = secondCid
         this.isFirst = false
         const {data:data} = await deleteSecondComment(this.dCid)
         // console.log(data);
         this.getComments();
        uni.$showMsg(data.msg)
       },
       close() {
       			this.$refs.popup.close()
       },
       
       
       toReport(){
         this.$refs.popup.open('bottom')
       },
       closeReport() {
       			this.$refs.popup.close()
       },
       async gotoReport(){
         // console.log('deleta');
         // console.log(this.id);
         const {data:data} = await reportArticle(parseInt(this.id))
         // console.log(data);
         this.$refs.popup.close()
         if(data.code === 200) return uni.$showMsg('您的举报我们已经收到，感谢您的支持。')

         
       }
    }
  }
</script>

<style lang="scss">
.custom-nav-bar {  
  position: relative;   
 height: 220rpx;  
    
  .nav-bar-bg1 {
    position: absolute;
    top: -6rpx;
    left: 0;  
    right: 0;  
    width: 100%;  
    height: 100%;  
    z-index: -1;
  }  
  .nav-bar-bg2{
    position: absolute;
    top: 80rpx;
    left: 35rpx;
    width: 64rpx;
    height: 64rpx;
  }
  .user-pic{
    position: absolute;
    width: 76rpx;
    height: 76rpx;
    border-radius: 38rpx;
    top: 80rpx;
    left: 125rpx;
  }
  .nav-title {  
    position: absolute;
    font-size: 25px;
    font-weight: bold;  
    color: #666666;  
    top: 80rpx;
    left: 220rpx;
    z-index: 999;
  }
  .nav-bar-bg3{
    position: absolute;
    top: 135rpx;
    right: 35rpx;
    width: 64rpx;
    height: 64rpx;
  }
}

.cat-article{
  display: flex;
  flex-direction: column;
  margin: 35rpx 30rpx;
  .cat-article-t1{
    font-size: 25px;
    font-weight: bold;
    color: #333333;
    margin-bottom: 10rpx;
  }
  .cat-article-t2{
    font-size: 12px;
    color: #868686;
    margin-bottom: 35rpx;
  }
  .cat-article-t3{
    font-size: 15px;
    color: #333333;
    margin-bottom: 75rpx;
  }
  image{
    width: 680rpx;
    height: 406rpx;
  }
}

.cat-comment{
  margin: 100rpx 35rpx;
  .cat-comment-top{
    width: 680rpx;
    height: 60rpx;
    border-bottom: 1px solid #666666;
    text{
      font-size: 16px;
      font-weight: bold;
      color: #333333;
    }
    }
    
    .cat-comment-main{
      margin-top: 25rpx;
      padding-bottom: 100rpx;
      .cat-comment-one{
        .cat-comment-one-top{
          display: flex;
          justify-content: space-between;
          align-items: center;
          .cat-comment-one-user{
            display: flex;
            align-items: center;
            justify-content: center;
            image{
              width: 68rpx;
              height: 68rpx;
              border-radius: 34rpx;
              margin-right: 15rpx;
            }
            .cat-comment-one-user-right{
              display: flex;
              flex-direction: column;
              align-items: flex-start;
              justify-content: center;
              .cat-comment-one-t1{
                font-size: 15px;
                color: #666666;
                margin-bottom: 8rpx;
              }
              .cat-comment-one-t2{
                font-size: 8px;
                color: #868686;
              }
            }
          }
          
          .cat-comment-one-praise{
            display: flex;
            justify-content: center;
            align-items: center;
            image{
              width: 40rpx;
              height: 40rpx;
              margin-right: 5rpx;
            }
            text{
              font-size: 15px;
              color: #666666;
            }
          }
        }
        
        .cat-comment-one-main{
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          justify-content: center;
          padding-left: 75rpx;
          margin-top: 15rpx;
          .cat-firstCid{
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: center;

          text{
            font-size: 15px;
            color: #333333;
            margin-bottom: 8rpx;
          }
          image{
            width: 248rpx;
            height: 148rpx;
          }
                    }
          .cat-comment-two{
            margin-top: 8rpx;
            .cat-comment-two-top{
              display: flex;
              justify-content: space-between;
              align-items: center;
              .cat-comment-two-user{
                display: flex;
                justify-content: center;
                align-items: center;
                image{
                  width: 50rpx;
                  height: 50rpx;
                  border-radius: 25rpx;
                  margin-right: 8rpx;
                }
                .cat-comment-two-user-right{
                  display: flex;
                  flex-direction: column;
                  justify-content: center;
                  align-items: flex-start;
                  .cat-comment-two-t1{
                    font-size: 13px;
                    color: #666666;
                  }
                  .cat-comment-two-t2{
                    font-size: 6px;
                    color: #868686;
                    width: 120rpx;
                  }
                }
              }
              
              .cat-comment-two-reply{
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-left: 8rpx;
                margin-bottom: 25rpx;
                .cat-comment-two-t3{
                  font-size: 9px;
                  color: #868686;
                  margin-right: 15rpx;
                  width: 40rpx;
                }
                .cat-comment-two-t4{
                  font-size: 13px;
                  color: #666666;
                }
              }
              
              .cat-comment-one-praise{
                display: flex;
                justify-content: center;
                align-items: center;
                margin-left: 308rpx;
                image{
                  width: 40rpx;
                  height: 40rpx;
                  margin-right: 5rpx;
                }
                text{
                  font-size: 15px;
                  color: #666666;
                }
              }
            }
            
            .cat-comment-two-main{
              display: flex;
              flex-direction: column;
              justify-content: center;
              align-items: center;
              margin-left: -365rpx;
              margin-top: 8rpx;
              text{
                font-size: 13px;
                color: #333333;
              }
              image{
                width: 114rpx;
                height: 114rpx;
              }
            }
          }
        }
      }
    }
  
}

.user-input{
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
    .uni-easyinput__content{
      width: 450rpx;
    }
    .user-send{
      width: 120rpx;
      height: 55rpx;
      background-color: #FFCC71;
      border-radius: 25rpx;
      text-align: center;
      margin-left: -50rpx;
      .user-t5{
        font-size: 15px;
        font-weight: bold;
        color: #666666;
        line-height: 55rpx;
      }
    }
    .user-pic{
      margin-left: 10rpx;
      image{
        width: 55rpx;
        height: 55rpx;
      }
    }
    .user-praise{
      display: flex;
      align-items: center;
      justify-content: center;
      margin-left: 10rpx;
      margin-right: 25rpx;
      image{
        width: 55rpx;
        height: 55rpx;
      }
      text{
        font-size: 15px;
        color: #666666;
      }
    }
  }
</style>
